import React, { useState,useEffect } from "react";
import { Modal, Form, Input } from "antd";
const { TextArea } = Input;
const Changerules = ({ visible, onCreate,onCancel, title, okText, data }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    console.log("qq", data);
    if (!!data) {
      form.setFieldsValue({ ...data });
    } else {
      form.resetFields();
    }
  }, [data]);
  const [value, setValue] = useState(1);
  return (
    <Modal
      visible={visible}
      title={title}
      okText={okText}
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: "public",
        }}
      >
        <Form.Item
          name="_id"
          hidden
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="text"
          label="标题"
          rules={[
            {
              required: true,
              message: "请输入标题名称",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="content"
          label="内容"
          rules={[
            {
              required: true,
              message: "请输入内容",
            },
          ]}
        >
          <TextArea rows={4} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Changerules;
